<template>
<el-card class="box-card">
  <el-form :inline="true" :model="formData" class="demo-form-inline">
  <el-form-item label="关键字">
    <el-input placeholder="根据编号搜所" v-model="formData.keys"></el-input>
  </el-form-item>
  <el-form-item>
    <el-button @click="formData={}">清除</el-button>
    <el-button type="primary" @click="search">查询</el-button>
  </el-form-item>
</el-form>
  <el-alert  :title="`数据一共有条${total}条`" show-icon  type="info" ></el-alert>
      <el-table :data="
            list.slice(
              (query.page - 1) * query.pagesize,
              query.page * query.pagesize
            )
          "  stripe style="width: 100%">
       <el-table-column prop="cataId" label="编号" width="200">
       </el-table-column>    
        <el-table-column prop="questionType" :formatter="questionType"  label="题型" width="100">
       </el-table-column>
        <el-table-column  label="题目编号" width="200">
           <template slot-scope="{row}">
              <span @click="check(row)">{{row.number}}</span>
            </template>
       </el-table-column>
        <el-table-column prop="addDate" label="录入时间" width="180">
       </el-table-column>
        <el-table-column prop="totalSeconds"  label="答题时间(s)" width="100" >
        </el-table-column>
        <el-table-column prop="accuracyRate" label="正确率(%)" width="100">
       </el-table-column>
        <el-table-column prop="chkUser" label="录入人" width="120">
       </el-table-column>
        <el-table-column fixed="right" label="操作" width="200">
      <template slot-scope="scope">
        <el-button
          @click.native.prevent="deleteRow(scope.$index, list)"
           type="danger" icon="el-icon-delete" circle>
        </el-button>
      </template>
    </el-table-column>
   </el-table>
  <div>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage4"
      :page-sizes="[5, 10, 20, 50]"
      :page-size="5"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
  </div>
    <!-- 题目预览弹窗 -->
  <el-dialog title="题目预览" :visible="isShow"  @close="isShow=false">
   <el-row :gutter="10">
     <el-col :span="6" >【题型】：
       <span v-if="list.questionType===1">单选题</span>
       <span v-else-if="list.questionType===2">多选题</span>
       <span v-else>简答</span>
     </el-col>
     <el-col :span="6" >【编号】：<span>{{list.cataId}}</span></el-col>
     <el-col :span="6" >【难度】：
      <span v-if="list.difficulty==='1'">简单</span>
       <span v-else-if="list.difficulty==='2'">一般</span>
       <span v-else>困难</span>
       </el-col>
     <el-col :span="6" >【标签】：<span>{{list.tags}}</span></el-col>
   </el-row>
    <el-row :gutter="10" style="margin:30px 0px">
     <el-col :span="6" >【学科】：<span>{{list.subjectName}}</span></el-col>
     <el-col :span="6" >【目录】：<span>{{list.directoryName}}</span></el-col>
     <el-col :span="6" >【方向】：<span>{{list.direction}}</span></el-col>
   </el-row>
   <hr>
    <el-row :gutter="10">
        <el-col :span="24" >【题干】:
        <span ></span>
        </el-col>
   </el-row>
   <!-- <el-row :gutter="10">
        <el-col :span="24" style="margin:20px 0px">单选题 选项:(以下选中的选项为正确答案)</el-col>
        <el-radio-group v-model="radio">
             <el-radio  :label="item.code"  v-for="item in list.options" :key="item.id">{{item.code}}</el-radio>
        </el-radio-group>
   </el-row> -->
   <hr>
   <el-row :gutter="10">
        <el-col :span="6" style="margin:20px 0px">【参考答案】：<span>111</span></el-col>
   </el-row>
   <hr>
   <el-row :gutter="10">
        <el-col :span="24" style="margin:20px 0px">【答案解析】:
          <span></span></el-col>
   </el-row>
   <hr>
   <el-row :gutter="10">
        <el-col :span="24" style="margin:20px 0px">【题目备注】:
           <span></span></el-col>
   </el-row>
   <hr>
   <el-button type="primary" class="cancal" @click="isShow=false">关闭</el-button>
  </el-dialog>
</el-card>
</template>

<script>
import axios from "axios";
export default {
  name:'randoms',
  data() {
    return {
      // keys:null,
      isShow:false,
      formData:{},
      list: [],
      query:{
        page:1,
        pagesize:5
      },
      currentPage4: 5,
      total:null,
    }
  },
  created(){
    this.getDataFunction()
  },
  methods:{
    // 题目类型处理
      questionType(row){
        if(row.questionType===1){
        return '单选'
      }
      else if(row.questionType===2){
        return '多选'
      }
      else return '简答'
    },
   async  getDataFunction() {
   await   axios.get("/getData")
        .then(res => {   //请求成功返回的数据
        console.log(res);
                 this.list=res.data.articles
                 this.total=this.list.length
  //可以res.data获取后台传给前端的数据
        })
        .catch(err => {  //请求失败返回的数据
          console.log("请求失败");
        });
    },
      //   // 分页器
      handleSizeChange(val) {
        this.query.pagesize = val
        // console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        this.query.page = val
        // console.log(`当前页: ${val}`);
      },
      deleteRow(index, rows) {
        rows.splice(index, 1);
        this.total--
      },
      search(){
      const res = this.list.filter(item=>item.cataId.indexOf(this.formData.keys)!==-1)
      // const res=this.list.filter(item=>item.cataId.indexOf(this.keys)!==-1)
      // console.log(res);
      this.list=res
      this.total=this.list.length
      },
      check(row){
        this.isShow=true
        console.log(row);
      }
  }
}

</script>

<style lang="scss" scoped>
.cancal{
  margin-left: 686px;
}
::v-deep .el-dialog__header{
  background: rgba(64, 158, 255);
  .el-dialog__title{
    color: #fff;
  }
  .el-icon-close:before{
    color: #fff;
  }
}
.box-card{
  margin: 10px;
}
.header{
  display:flex;
  justify-content: space-between;
}
.demo-form-inline{
  display: flex;
  justify-content: space-between;
}
</style>